<!--进度条-->
<script setup >
defineOptions({
  name:'sw1'
})
import {onMounted} from "vue";
onMounted(() => {
  const mySwiper1 = new Swiper('.jd', {
    // direction: 'vertical', // 垂直切换选项
    direction: 'horizontal', // 水平切换选项
    loop: true, // 循环模式选项
    spaceBetween: 10,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      type: "progressbar",//上方进度条
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    // scrollbar: {
    //   el: '.swiper-scrollbar',
    // },
  });

});
function handleName(e){
  console.log(e,'e')
}
function handleName2(e){
  console.log(e,'e')
}
</script>

<template>
  <div class="swiper jd">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img  class="imageStyle" src="@/assets/BZ/1.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/2.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/3.jpg"></div>
      <div class="swiper-slide"><img class="imageStyle"  src="@/assets/BZ/4.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/5.jpg"></div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev" @click="handleName"></div>
    <div class="swiper-button-next" @click="handleName2"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>

</template>

<style scoped lang="scss">
.imageStyle{
  display: block;
  width: 20rem;
  height: 20rem;
  object-fit: cover;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}




.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.jd {
  height: 80%;
  width: 100%;
}








</style>
